<template>
  <div class="information">
    <h1 class="title">店铺信息</h1>
    <div class="box">
      <div class="shop">
        <el-form ref="form" :model="shopInfoBak" label-position="right" label-width="120px">
          <el-form-item class="shop-phone" label="用户名：" prop="shopType">
            <p>{{ shopInfoBak.phone }}<VIP :level="shopInfoBak.level" :type="shopInfoBak.shoptype" /></p>
          </el-form-item>
          <el-form-item class="shop-level" label="店铺等级：">
            <Level class="star" :credit="shopInfoBak.credit" />
            <span>{{ shopInfoBak.level }}级</span>
            <span class="credit">店铺信用分：{{ shopInfoBak.credit }}分</span>
            <el-button class="link" type="text">查看《店铺等级信用分规则》</el-button>
          </el-form-item>
          <el-form-item class="shop-deposit">
            <span slot="label" class="label">店铺保证金<el-tooltip class="item" effect="dark" content="提示文字" placement="top"><i class="el-icon-warning-outline" /></el-tooltip>：</span>
            <span>{{ shopInfoBak.shopType === '01100009' ? '1000' : shopInfoBak.shopType === '01100009' ? '3988' : '0' }}元</span>
            <span class="flag">{{ shopInfoBak.pledge === '01500001' ? '待缴纳' : '已缴纳' }}</span>
          </el-form-item>
          <el-form-item class="shop-name" label="店铺名称：" prop="shopName">
            <el-input v-if="shopInfoBak.name.indexOf('`') > -1" v-model="shopName" clearable class="ipt" placeholder="请输入店铺名称" />
            <span v-else>{{ shopInfoBak.name }}</span>
            <!-- <el-input  v-model="shopInfoBak.name" disabled class="ipt" placeholder="请输入店铺名称" /> -->
            <p v-if="shopInfoBak.name.indexOf('`') > -1" class="tips"><i class="el-icon-info" /><span>请注意店铺名称确定后无法修改！</span></p>
          </el-form-item>
          <el-form-item class="shop-avatar" label="店铺头像：" prop="avatar">
            <el-image
              style="width: 100px; height: 100px"
              :src="qnPath(shopInfoBak.avatar)"
              fit="fill"
            />
            <image-upload :size="80" imgname="公司头像" tip="支持GIF、JPG、JPEG、PNG文件大小80K以内，建议尺寸100PX*100PX" @onSuccess="avatarSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="shop-intro" label="店铺简介：" prop="intro">
            <el-input
              v-model="shopInfoBak.summary"
              name="intro"
              type="textarea"
              placeholder="简单介绍店铺..."
              maxlength="150"
              minlength="20"
              show-word-limit
              :clearable="true"
              :autosize="{ minRows: 3, maxRows: 5 }"
            />
          </el-form-item>
          <el-form-item
            class="shop-email"
            label="电子邮箱："
            prop="email"
            :rules="[
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
          >
            <el-input
              v-model="shopInfoBak.email"
              name="email"
              type="email"
              placeholder="请输入正确的电子邮箱地址"
              :clearable="true"
            />
          </el-form-item>
          <el-form-item class="shop-logo" label="公司logo图：" prop="logo">
            <el-image
              style="width: 200px; height: 90px"
              :src="qnPath(shopInfoBak.logo)"
              fit="fill"
            />
            <image-upload :size="300" imgname="公司Logo" tip="该图片用于电脑端店铺首页和公司介绍，建议尺寸200PX*90PX" @onSuccess="logoSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="shop-img" label="公司主图：" prop="img">
            <el-image
              style="width: 300px; height: 405px"
              :src="qnPath(shopInfoBak.mainimage)"
              fit="fill"
            />
            <image-upload :size="1024" imgname="公司主图" tip="该图片用于展示公司环境图片（如公司正门、公司前台、工作环境等），建议尺寸300PX*405PX" @onSuccess="mainImgSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="shop-introduce" label="公司介绍：" prop="introduce">
            <div style="width:1000px;"><tinymce v-model="shopInfoBak.introduce" :height="300" /></div>
          </el-form-item>
          <el-form-item class="shop-button">
            <span class="label" />
            <el-button type="primary" :loading="loading" size="small" @click="submit">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Level from '@/components/Level';
import VIP from '@/components/VIP';
import Tinymce from '@/components/Tinymce';
import ImageUpload from '@/components/ImagesUpload';
import { mapGetters } from 'vuex';
import { updateUser } from '@/api/shop';
export default {
  name: 'ShopInformation',
  components: {
    Level,
    Tinymce,
    ImageUpload,
    VIP
  },
  data() {
    return {
      shopName: '',
      shopInfoBak: {},
      form: {},
      loading: false,
      updateCount: 0 // 页面更新次数
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  beforeMount() {
    this.shopInfoBak = JSON.parse(JSON.stringify(this.shopInfo));
  },
  beforeRouteLeave(to, from, next) {
    if (this.updateCount > 1) {
      if (from.path.includes('/shop/information')) {
        this.$confirm('即将离开当前页，请确定是否保存当前数据？', '离开当前页', {
          confirmButtonText: '保存',
          cancelButtonText: '不保存',
          type: 'warning'
        }).then(() => {
          // 提交变更
          this.submit();
          next();
        }).catch(() => {
          next();
        });
      } else {
        next();
        this.shopInfoBak = JSON.parse(JSON.stringify(this.shopInfo));
      }
    } else {
      next();
    }
  },
  updated() {
    this.updateCount = this.updateCount + 1;
  },
  methods: {
    avatarSuc(res) {
      this.shopInfoBak.avatar = res;
    },
    logoSuc(res) {
      this.shopInfoBak.logo = res;
    },
    mainImgSuc(res) {
      this.shopInfoBak.mainimage = res;
    },
    submit() {
      this.loading = true;
      const { id, name, avatar, logo, summary, mainimage, introduce, email } = this.shopInfoBak;
      // 修改个人标配资料
      // eslint-disable-next-line no-unused-vars
      const updateTIMPromise = this.tim.updateMyProfile({
        nick: name,
        avatar: avatar,
        // eslint-disable-next-line no-undef
        gender: TIM.TYPES.GENDER_MALE,
        selfSignature: summary,
        // eslint-disable-next-line no-undef
        allowType: TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
      });
      // eslint-disable-next-line no-unused-vars
      const updateUserPromise = updateUser({ id, name: this.shopName || name, avatar, logo, summary, mainimage, introduce, email });

      Promise.all(['updateUserPromise', 'updateTIMPromise']).then(res => {
        console.log(res);

        this.loading = false;
        this.$message({
          message: '修改成功！',
          type: 'success',
          duration: 1000
        });
        this.updateCount = 0;
        this.$store.dispatch('getInfo');
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/styles/shop-information.scss';
</style>
